<template>
<div class="container-wrap">
    

  <div class="container">
          <img src="../../assets/icons/redbag/ttlhbtitle.png" alt="" class="ttlhbtitle-img">
      <img src="../../assets/icons/redbag/bottom@2x.png" alt="" class="bottom-img">
      <img src="../../assets/icons/redbag/bigredbag.png" alt="" class="bigredbag-img">
      <div class="main-area">
          <div class="main-title">
              最高100积分
          </div>          
          <img src="../../assets/icons/redbag/toquickbuy.png" alt="" class="buybtn" @click="doPickBag">
          <div class="buybtntip">
              已有5130654人抢到红包
          </div>
      </div>
      <div class="dialog-masker" v-show="isDialogShowed" @click="isDialogShowed = false">
          <div class="dialog" @click.stop="noop">
               <img src="../../assets/icons/redbag/cancel@2x.png" alt="" class="cancel-icon" @click="isDialogShowed=false">
              <div class="dialog-title">
                  恭喜获得1张
              </div>
              <div class="list-item list-item0 flex flex-stretch">
                <div class="flex-con">
                    <div class="title">
                        伊莱克斯家电优惠券
                    </div>
                <div class="desc">
                    有效期限：<span class="valid-time">2018.04.01-2018.05.11</span> 
                </div>
                <div class="more-info">
                    <div class="flex">
                    <div>
                        详细信息
                    </div>
                        <img src="../../assets/icons/yh/ok.png" alt="" class="ok-icon">
                    </div>           
                </div>
                </div>
                <div class="text-center">
                    <div class="discount">
                    <span class="discount-num">5</span>折
                    </div>
                    <div class="discount-txt">
                    全国通用
                    </div>
                </div>       
              </div>
              <div class="yytip">
                  可去“会员中心”查看优惠券
              </div>
              <img src="../../assets/icons/redbag/now2use.png" alt="" class="now2use-img">
          </div>
      </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDialogShowed: false
    };
  },
  methods: {
    doPickBag() {
      this.isDialogShowed = true;
    },
    noop() {}
  }
};
</script>

<style lang="scss" scoped>
.yytip {
  font-size: 0.4rem;
  color: #fff;
  padding-bottom: 0.2667rem;
  text-align: center;
}
.dialog-masker {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.51);
  z-index: 100;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .dialog {
    width: 8.28rem;
    height: 8.8133rem;
    position: relative;
    background-color: #f7483b;
    border-radius: 0.48rem;
    position: absolute;
    left: 50%;
    margin-left: -4.14rem;
    top: 50%;
    margin-top: -4.40665rem;
    .cancel-icon {
      width: 0.6267rem;
      height: 0.6267rem;
      position: absolute;
      right: 0.32rem;
      top: 0.28rem;
    }
    .dialog-title {
      text-align: center;
      font-size: 0.64rem;
      color: #ffffff;
      padding-top: 1.0933rem;
    }
  }
}
.now2use-img {
  width: 5.7333rem;
  margin: 0 auto;
  display: block;
}
.container-wrap {
  background-image: url("../../assets/icons/redbag/redbg.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
  min-height: 100%;
}
.bottom-img {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}
.container {
  background-image: url("../../assets/icons/redbag/flowers.png");
  background-repeat: no-repeat;
  background-position-y: 1.9867rem;
  background-size: 100% auto;
}
.ttlhbtitle-img {
  width: 100%;
  margin-top: 0.6rem;
}
.bigredbag-img {
  // 624 × 883
  width: 8.32rem;
  margin: 0 auto;
  display: block;
  margin-top: 0.72rem;
  // × 883
}
.main-area {
  position: absolute;
  top: 8.5333rem;
  color: #ffffff;
  text-align: center;
  left: 0;
  right: 0;
  .main-title {
    font-size: 0.8267rem;
    padding-bottom: 1rem;
  }
  .buybtn {
    //430 × 142
    width: 5.7333rem;
    height: 1.8933rem;
    margin: 0 auto;
  }
  .buybtntip {
    font-size: 0.3467rem;
    color: rgba(255, 255, 255, 0.71);
    padding-top: 0.1rem;
  }
}

.list-item {
  padding-top: 0.3867rem;
  padding-left: 0.52rem;
  padding-right: 0.2rem;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  .desc {
    font-size: 0.2267rem;
    padding-top: 0.0933rem;
    color: #bbbbbb;
    .valid-time {
      color: #007f00;
    }
  }
  .title {
    font-size: 0.3067rem;
    color: #222222;
  }
  .discount {
    font-size: 0.2667rem;
    color: #fff;
    .discount-num {
      font-size: 0.76rem;
    }
  }
  .more-info {
    font-size: 0.2rem;
    padding-top: 0.22rem;
    color: #999;
    .ok-icon {
      width: 0.2267rem;
      height: 0.2133rem;
      margin-left: 0.1067rem;
    }
  }
  .discount-txt {
    font-size: 0.2667rem;
    color: #ffffff;
    padding-top: 0.12rem;
  }
}

.list-item {
  width: 7.44rem;
  height: 2.4052rem;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-item0 {
  background-image: url("../../assets/icons/yh/blueline.png");
}
.list-item1 {
  background-image: url("../../assets/icons/yh/originline.png");
}
.list-item2 {
  background-image: url("../../assets/icons/yh/redline.png");
}
</style>

